{% extends '__base__.html' %}

{% block title %}粘贴板{% endblock %}
{% block beforehead %}
<script src="https://unpkg.com/vue@next"></script>
{% endblock %}
{% block content %}
<!-- Content Header (Page header) -->

<section class="content-header">
    <h1>
        粘贴板
        <small>共享粘贴板信息</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="/"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">粘贴板</li>
    </ol>
</section>

<div class="container" id="main">
    <div class="row">
        <div class="col-md-8 pb-4">
            <textarea id="paste" style="width: 100%" rows="3" placeholder="paste conten here"></textarea>
        </div>
        <aside class="col-md-4 blog-sidebar">
            <div class="p-4 mb-3 bg-light rounded">
                <h4 class="font-italic">用户信息</h4>
                {% if __user__ %}
                <p class="mb-0">{{ __user__.name }}</p>
                <p class="mb-0">{{ __user__.email }}</p>
                {% else %}
                <p class="mb-0">用户未登录</p>
                {% endif %}
                </div>
        </aside>
    </div>
    <div class="row">
        <div class="col">
            <h1>Index</h1>
        </div>
    </div>
</div>

</div>
{% endblock %}

{% block beforebody %}
<script>
    let clipboard = {
        // data返回值是暴露的属性
        data() {
            return {
                items: [],
            }
        },
        props: ['index'],
        methods: {
        },
        delimiters: ['+{', '}'],
        template: `
            <div class="row">
                <div class="col-md-8 pb-4">
                    <textarea @paste="onPaste($event)" style="width: 100%;resize:none;" rows="3" placeholder="paste conten here"></textarea>
                </div>
                <aside class="col-md-4 blog-sidebar">
                    <div class="p-4 mb-3 bg-light rounded">
                        <h4 class="font-italic">用户信息</h4>
                        {% if __user__ %}
                        <p class="mb-0">{{ __user__.name }}</p>
                        <p class="mb-0">{{ __user__.email }}</p>
                        {% else %}
                        <p class="mb-0">用户未登录</p>
                        {% endif %}
                    </div>
                </aside>
            </div>
            <div class="row">
                <div v-for="item in items" class="col-sm-12 col-md-4 pb-4">
                    <div class="card" style="cursor: pointer">
                        <div class="card-header" @click="deleteItem(item.id)">
                            删除
                        </div>
                        <textarea @click="copyContent($event)" class="card-body" rows="10" readOnly style="height: 100%;width: 100%;resize:none;" :value="item.content"></textarea>
                    </div>
                </div>
            </div>
            `,
        mounted() {
            this.loadItems()
        },
        watch: {
        },
        updated() {
        },
        methods: {
            loadItems() {
                axios.get('/clipboard/items')
                    .then(
                        response => {
                            if (response.status === 200) {
                                let data = response.data
                                if (data['code'] === 0) {
                                    this.items = data['msg']['items'] ? data['msg']['items'] : this.items
                                } else {
                                    console.log('FAILED: ' + data['msg'])
                                }
                            }
                        })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            onPaste(event) {
                event.target.value = ""
                let clipped = event.clipboardData.getData('text')
                axios.post('/clipboard', {
                    text: clipped
                })
                .then(
                    response => {
                        // console.log(response);
                        if (response.status === 200) {
                            let data = response.data
                            if (data['code'] === 0) {
                                console.log('SUCCESS: ' + data['msg'])
                                this.loadItems()
                            } else {
                                console.log('FAILED: ' + data['msg'])
                            }
                        }
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            deleteItem(id) {
                console.log('delete ' + id)
                if (confirm(" 是否删除[" + id + "] ")) {
                    axios.get('/clipboard/delete/' + id)
                    .then(
                        response => {
                            // console.log(response);
                            if (response.status === 200) {
                                let data = response.data
                                if (data['code'] === 0) {
                                    console.log('SUCCESS: ' + data['msg'])
                                    this.loadItems()
                                } else {
                                    console.log('FAILED: ' + data['msg'])
                                }
                            }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                }
            },
            copyContent(e) {
                let el = e.target
                el.select()
                document.execCommand('Copy')
                console.log('复制: \n' + el.value)
            }
        },
        computed: {
        }
    }
    const app = Vue.createApp(clipboard)
    // mount方法返回根组件实例
    const vm = app.mount('#main')
</script>
{% endblock %}